<!DOCTYPE html>
<html>
<head>
	<link href="../resources/presentation.css" rel="stylesheet" type="text/css" />
	<link href="../resources/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
	<script src="../resources/syntaxhighlighter.min.js" type="text/javascript"></script>

	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
</head>
<body>
<div class="nav">Prev <a href="index.html">Index</a> <a href="02_compiled-template.html">Next</a></div>

<h3>JsRender: Declare template in script block, and render against data</h3>

<!--====== Container ======-->
<table><tbody id="details"></tbody></table>

<!--====== Template ======-->
<script id="personTmpl" type="text/x-jsrender">
	<tr>
		<td>{{>firstName}}</td>
	</tr>
</script>

<!--====== Script ======-->
<script type="text/javascript">
var person = {
	firstName: "Jeff"
};

// Render to string
var html = $( "#personTmpl" ).render( person );

// Insert as HTML
$( "#details" ).html( html );

</script>

<!--================ End of Demo Section ================-->

<h4>HTML:</h4>
<pre class="brush: xml;">
<!--====== Template ======-->
&lt;script id="personTmpl" type="text/x-jsrender">
    &lt;tr>
        &lt;td>{{>firstName}}&lt;/td>
    &lt;/tr>
&lt;/script>

<!--====== Container ======-->
&lt;table>&lt;tbody id="details">&lt;/tbody>&lt;/table></pre>

<h4>Data:</h4>
<pre class="brush: js;">
var person = {
    firstName: "Jeff"
};
</pre>

<h4>Script:</h4>
<pre class="brush: js;">
// Render to string
var html = $( "#personTmpl" ).render( person );

// Insert as HTML
$( "#details" ).html( html );
</pre>
</body>
</html>
